<template>
  <div id="finance-List">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="已激活" name="first">
        <el-form :model="activeFormInline" ref="activeFormInline" class="activeFormInline" :inline="true" size="small">
          <el-form-item label="">
            <el-select clearable v-model="activeFormInline.dimension" filterable placeholder="选择统计类型">
              <el-option v-for="(item, index) in typeArray"
                         :key="item.id"
                         :label="item.name"
                         :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="">
            <el-select clearable v-model="activeFormInline.ecardStatus" filterable placeholder="选择状态">
              <el-option label="未到期" value="1"></el-option>
              <el-option label="已到期" value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="产品名称">
            <el-select clearable v-model="activeFormInline.productId" filterable placeholder="选择产品名称">
              <el-option v-for="(item, index) in productNameArray"
                         :key="item.id"
                         :label="item.productName"
                         :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="激活时间" class="order-time">
            <el-row>
              <el-col :span="11" class="time-width">
                <el-date-picker
                  v-model="activeFormInline.startTime"
                  type="datetime"
                  placeholder="选择日期时间"
                  default-time="00:00:00">
                </el-date-picker>
              </el-col>
              <el-col :span="1" class="time-span">~</el-col>
              <el-col :span="11" class="time-width">
                <el-date-picker
                  v-model="activeFormInline.endTime"
                  type="datetime"
                  placeholder="选择日期时间"
                  default-time="23:59:59">
                </el-date-picker>
              </el-col>
            </el-row>
          </el-form-item>
          <el-button type="primary" size="small" @click="searchActive()">搜索</el-button>
          <!--<el-button type="primary" size="small" >下载</el-button>-->
        </el-form>
        <el-table
          class="style-a"
          :data="activeTableData"
          size="small"
          border
          style="width:100%"
          v-loading.body="loading1" element-loading-text="Loading">
          <el-table-column
            label="统计类型"
            align="center"
            prop="dimensionValue"
            min-width="120">
          </el-table-column>
          <el-table-column
            label="已激活数量"
            align="center"
            prop="orderCodeCount"
            min-width="100">
          </el-table-column>
          <el-table-column
            label="总价（元）"
            align="center"
            prop="orderPriceStr"
            min-width="100">
          </el-table-column>
          <el-table-column
            label="服务费（元）"
            align="center"
            prop="orderServiceChargeStr"
            min-width="100">
          </el-table-column>
          <el-table-column
            label="代理佣金（元）"
            align="center"
            prop="orderCommissionStr"
            min-width="100">
          </el-table-column>
          <el-table-column
            label="清分结算（元）"
            prop="settlementStr"
            align="center"
            min-width="100">
          </el-table-column>
          <el-table-column
            label="利润（元）"
            prop="profitStr"
            align="center"
            min-width="100">
          </el-table-column>
        </el-table>
        <el-pagination
          @current-change="handleCurrentChange1"
          :current-page="currentPage1"
          :page-sizes="[20]"
          :page-size="20"
          layout="total, prev, pager, next, jumper"
          :total="totalSize1">
        </el-pagination>
      </el-tab-pane>
      <el-tab-pane label="未激活" name="second">
        <el-form :model="unactiveFormInline" ref="unactiveFormInline" class="unactiveFormInline" :inline="true" size="small">
          <el-form-item label="">
            <el-select clearable v-model="unactiveFormInline.dimension" filterable placeholder="选择统计类型">
              <el-option v-for="(item, index) in typeArray"
                         :key="item.id"
                         :label="item.name"
                         :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <!--<el-form-item label="">-->
            <!--<el-select clearable v-model="unactiveFormInline.ecardStatus" filterable placeholder="选择状态">-->
              <!--<el-option label="未到期" value="1"></el-option>-->
              <!--<el-option label="已到期" value="0"></el-option>-->
            <!--</el-select>-->
          <!--</el-form-item>-->
          <el-form-item label="产品名称">
            <el-select clearable v-model="unactiveFormInline.productId" filterable placeholder="选择产品名称">
              <el-option v-for="(item, index) in productNameArray"
                         :key="item.id"
                         :label="item.productName"
                         :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="下单时间" class="order-time">
            <el-row>
              <el-col :span="11" class="time-width">
                <el-date-picker
                  v-model="unactiveFormInline.startTime"
                  type="datetime"
                  placeholder="选择日期时间"
                  default-time="00:00:00">
                </el-date-picker>
              </el-col>
              <el-col :span="1" class="time-span">~</el-col>
              <el-col :span="11" class="time-width">
                <el-date-picker
                  v-model="unactiveFormInline.endTime"
                  type="datetime"
                  placeholder="选择日期时间"
                  default-time="23:59:59">
                </el-date-picker>
              </el-col>
            </el-row>
          </el-form-item>
          <el-button type="primary" size="small" @click="searchUnactive()">搜索</el-button>
          <!--<el-button type="primary" size="small" >下载</el-button>-->
        </el-form>
        <el-table
          class="style-a"
          :data="unactiveTableData"
          size="small"
          border
          style="width:100%"
          v-loading.body="loading2" element-loading-text="Loading">
          <el-table-column
            label="统计类型"
            align="center"
            prop="dimensionValue"
            min-width="120">
          </el-table-column>
          <el-table-column
            label="可激活数"
            align="center"
            min-width="100">
            <el-table-column
              label="数量"
              align="center"
              prop="unActiveCount"
              min-width="90">
            </el-table-column>
            <el-table-column
              label="金额（元）"
              align="center"
              prop="unActivePriceStr"
              min-width="90">
            </el-table-column>
          </el-table-column>
          <el-table-column
            label="已失效数"
            align="center"
            min-width="100">
            <el-table-column
              label="数量"
              align="center"
              prop="oveDueCount"
              min-width="90">
            </el-table-column>
            <el-table-column
              label="金额（元）"
              align="center"
              prop="oveDuePriceStr"
              min-width="90">
            </el-table-column>
          </el-table-column>
          <el-table-column
            label="申请退单数"
            align="center"
            min-width="100">
            <el-table-column
              label="数量"
              align="center"
              prop="refundingCount"
              min-width="90">
            </el-table-column>
            <el-table-column
              label="金额（元）"
              align="center"
              prop="refundingPriceStr"
              min-width="90">
            </el-table-column>
          </el-table-column>
          <el-table-column
            label="已退单"
            align="center"
            min-width="100">
            <el-table-column
              label="数量"
              align="center"
              prop="unAbleCount"
              min-width="90">
            </el-table-column>
            <el-table-column
              label="金额（元）"
              align="center"
              prop="unAblePriceStr"
              min-width="90">
            </el-table-column>
            <el-table-column
              label="退单金额（元）"
              align="center"
              prop="refundPriceStr"
              min-width="90">
            </el-table-column>
          </el-table-column>
          <el-table-column
            label="总计"
            align="center"
            min-width="100">
            <el-table-column
              label="数量"
              align="center"
              prop="totalCount"
              min-width="90">
            </el-table-column>
            <el-table-column
              label="金额（元）"
              align="center"
              prop="totalPriceStr"
              min-width="90">
            </el-table-column>
          </el-table-column>
        </el-table>
        <el-pagination
          @current-change="handleCurrentChange2"
          :current-page="currentPage2"
          :page-sizes="[20]"
          :page-size="20"
          layout="total, prev, pager, next, jumper"
          :total="totalSize2">
        </el-pagination>
      </el-tab-pane>
    </el-tabs>
  </div>

</template>
<script>
  import { getProductTypeList, getStatisticsTypeList, getActiveList, getUnactiveList } from '@/api/financeStatistics'
//  import moment from 'moment'
//  var Limit_Day = null
//  var unLimit_Day = null
  export default {
    data() {
      return {
        showDatePicker: true,
        showDatePicker2: true,
        activeFormInline: {
          dimension: null,
          ecardStatus: null,
          startTime: null,
          endTime: null,
          productId: null
        },
        unactiveFormInline: {
          dimension: null,
          ecardStatus: null,
          startTime: null,
          endTime: null,
          productId: null
        },
//        pickerOptions1: {
//          disabledDate(time) {
//            if (Limit_Day != null) {
//              let now = Limit_Day
//              let maxTime = now.getTime() + 3600 * 1000 * 24 * 365
//              let minTime = now.getTime() - 3600 * 1000 * 24 * 1
//              return !(time.getTime() <= maxTime && time.getTime() >= minTime.getTime())
//            } else {
//              return true
//            }
//          }
//        },
//        pickerOptions2: {
//          disabledDate(time) {
//            if (unLimit_Day != null) {
//              let now = unLimit_Day
//              let maxTime = now.getTime() + 3600 * 1000 * 24 * 365
//              let minTime = now.getTime() - 3600 * 1000 * 24 * 1
//              return !(time.getTime() <= maxTime && time.getTime() >= minTime.getTime())
//            } else {
//              return true
//            }
//          }
//        },
        typeArray: [],
        productNameArray: [],
        loading1: false,
        loading2: false,
        selfPicture: '',
        idCardFront: '',
        idCardOpposite: '',
        centerDialogVisible: false,
        activeName: 'first',

        notDueForm: {
          userName: null,
          startTime: null,
          endTime: null
        },
        activeTableData: [],
        unactiveTableData: [],
        currentPage1: 1,
        totalSize1: null,
        currentPage2: 1,
        totalSize2: null
      }
    },
    created() {
      this.initTime()
      this.getTypeList()
      this.getProductList()
      this.getActiveStatisticsList()
    },
    methods: {
      initTime() {
        let date = new Date()
        let startTime = date.getTime() - 3600 * 1000 * 24 * 7
        this.activeFormInline.startTime = new Date(startTime)
        this.activeFormInline.endTime = new Date()
//        Limit_Day = this.activeFormInline.startTime
      },
      initTime2() {
        let date = new Date()
        let startTime = date.getTime() - 3600 * 1000 * 24 * 7
        this.unactiveFormInline.startTime = new Date(startTime)
        this.unactiveFormInline.endTime = new Date()
//        unLimit_Day = this.unactiveFormInline.startTime
      },
//      rerenderDatePicker() {
//        this.showDatePicker = false
//        this.$nextTick(() => {
//          this.showDatePicker = true
//        })
//      },
//      rerenderDatePicker2() {
//        this.showDatePicker2 = false
//        this.$nextTick(() => {
//          this.showDatePicker2 = true
//        })
//      },
//      timePicker() {
//        Limit_Day = this.activeFormInline.startTime
//        this.rerenderDatePicker()
//      },
//      unactiveTimePicker() {
//        unLimit_Day = this.unactiveFormInline.startTime
//        this.rerenderDatePicker2()
//      },
      getTypeList() {
        getStatisticsTypeList().then(res => {
          let data = res.data
          if (data.errorCode === 'E_000') {
            this.typeArray = data.body
          }
        })
      },
      getProductList() {
        getProductTypeList().then(res => {
          let data = res.data
          if (data.errorCode === 'E_000') {
            this.productNameArray = data.body
          }
        })
      },
      handleClick(tab, event) {
        if (tab.index == 1) {
          this.initTime2()
          this.getUnactiveStatisticsList()
        } else {
          this.initTime()
          this.getActiveStatisticsList()
        }
      },
      getActiveStatisticsList() {
        let params = {
          dimension: this.activeFormInline.dimension,
          ecardStatus: this.activeFormInline.ecardStatus,
          endTime: new Date(this.activeFormInline.endTime).getTime() || null,
          startTime: new Date(this.activeFormInline.startTime).getTime() || null,
          productId: this.activeFormInline.productId,
          pageNumber: this.currentPage1,
          pageSize: 20
        }
        this.loading1 = true
        getActiveList(params).then(res => {
          let data = res.data
          this.loading1 = false
          if (data.errorCode === 'E_000') {
            this.activeTableData = data.body.list
            this.totalSize1 = data.body.total
          }
        }).catch(() => {
          this.loading1 = false
        })
      },
      getUnactiveStatisticsList() {
        let params = {
          dimension: this.unactiveFormInline.dimension,
//          ecardStatus: this.unactiveFormInline.ecardStatus,
          endTime: new Date(this.unactiveFormInline.endTime).getTime() || null,
          startTime: new Date(this.unactiveFormInline.startTime).getTime() || null,
          productId: this.unactiveFormInline.productId,
          pageNumber: this.currentPage2,
          pageSize: 20
        }
        this.loading2 = true
        getUnactiveList(params).then(res => {
          let data = res.data
          this.loading2 = false
          if (data.errorCode === 'E_000') {
            this.unactiveTableData = data.body.list
            this.totalSize2 = data.body.total
          }
        }).catch(() => {
          this.loading2 = false
        })
      },
      searchActive() {
        this.currentPage1 = 1
        this.getActiveStatisticsList()
      },
      searchUnactive() {
        this.currentPage2 = 1
        this.getUnactiveStatisticsList()
      },
      handleCurrentChange1(val) {
        this.currentPage1 = val
        this.getActiveStatisticsList()
      },
      handleCurrentChange2(val) {
        this.currentPage2 = val
        this.getUnactiveStatisticsList()
      }
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss">
  #finance-List{
    .el-dialog{
      .imgList{
        width:100%;
        img{
          width:32.9%;
          height:280px;
          padding:0 5px;
          display:inline-block;
        }
      }
    }

  }
</style>
